<template>
    <div id = "option-number">
      <div> △ </div>
      <div id = "selected"> {{optionVal}} </div>
      <div> ▽ </div>
      <div> {{optionObj.rang}} {{optionObj.unit}} </div>
    </div>
</template>

<script>
  export default {
    props: {
      optionObj: {
        type: Object,
        require: true
      },
      optionVal: {
        type: Number,
        twoWay: true,
        require: true
      }
    },
    ready () {
      this.decSelection = function () {
        let _decimal = this.optionObj.decimal
        let tmp = 1.0
        for (let i = 0; i < _decimal; i++) {
          tmp /= 10
        }
        this.optionVal -= tmp
        if (this.optionVal < this.optionObj.rang[0]) {
          this.optionVal = this.optionObj.rang[0]
        }
        let val = this.optionVal.toFixed(_decimal)
        this.optionVal = parseFloat(val)
      }

      this.incSelection = function () {
        let _decimal = this.optionObj.decimal
        let tmp = 1.0
        for (let i = 0; i < _decimal; i++) {
          tmp /= 10
        }
        this.optionVal += tmp
        if (this.optionVal > this.optionObj.rang[1]) {
          this.optionVal = this.optionObj.rang[1]
        }
        let val = this.optionVal.toFixed(_decimal)
        this.optionVal = parseFloat(val)
      }
    }
  }
</script>

<style lang = "less">
  #option-number {
    text-align: center;
    border: 3px solid grey;
    width: 150px;
    background-color: white;
    position: relative;
    left: 100px;
  }

  #selected {
    background-color: black;
    color: white;
  }
</style>
